@extends('layouts.master3')
<?php
use App\Utils;
?>
@section('title')
{{"千里码-技能树"}}
@stop
@section("css")
<link rel="stylesheet" type="text/css" href="/css/tree.css">
<link rel="stylesheet" href="/css/index.css">
@endsection

@section('content')
<div class="contain main">

    <!-- 左边D3-->
    <div class="task_left pull-left">
            <div class="d3"></div>
        
    </div>
    <div class="pull-right right_p">
        <div class="right_menu pull-left">
                <a href="javascript:;"><img src="{{$user->avatar->url('thumb')}}">
                正在攻克的任务</a>
        </div>
        <div class="task_right pull-left">
            
            <!-- 个人信息-->

                <div id="tooltip" class="goog-hovercard popover1 bottom in">
                    <div class=" no-hovercard"><div class="profile-card member">
                    <div class="upper">
                        <a class="avatar-link" href="/profile/{{Utils::id2url($user->id)}}" target="_blank">
                            <img class="avatar avatar-xs" alt="" src="{{$user->avatar->url('thumb')}}">
                            <span class="name">
                                <?php
                                $u=$user;
                                echo $u->name;
                                if($u->id==280 || $u->id==703 ||$u->id==347 ||$u->id==784 ||$u->id==19)
                                echo '<i title="键盘侠"></i>';
                                ?>
                                </span>

                        </a>

                        <div class="tagline"><?php if($user->company=="")echo "请完善公司信息";else echo $user->company." ".$user->title;?></div>
                            <?php
                            $arr=explode("|",$user->location);
                            if(count($arr)<2)
                            {
                              $pro="请填写省份信息";
                              $city="请填写城市信息";
                            }
                            else
                            {
                               $pro=$arr[0];
                               $city=$arr[1];
                            }
                            ?>
    <!--
                        <div class="personal">
                            <span class="info-wrap">
                                <span class="item" style="border:none;">{{$pro}}</span>
                                <span class="item">{{$city}}</span>
                            </span>
                        </div>
    -->

                    </div>
                    <div class="glory clearfix">
                        <!--<span class="glory">勋章:</span>-->
<?php
		foreach($medal as $m)
		{
            echo '<i class="iconfont" title="'.$m->title.'">'.$m->class.'</i>';
		}
?>
                    </div>
                    <div class="lower clearfix bor_te">
                        <div class="meta">
                            <a class="item" target="_blank" href="/rank">
                                <span class="value">{{intval($user->score/100)}}</span>
                                <span class="key">分数</span>
                            </a>
                            <a class="item" target="_blank" href="/rank?page={{intval($user->rank/20)+1}}">
                                <span class="value">{{$user->rank}}</span>
                                <span class="key">排行</span>
                            </a>
                            <a class="item" target="_blank" href="/rank">
                                <span class="value">{{$user->solveNum}}</span>
                                <span class="key">解题数</span>
                            </a>

                            <a class="item" target="_blank" href="/help?tag=kuibu#kuibu">
                                <span class="value">
                                <?php
$s=$user->score/100;
echo $user->step+Utils::score2step($s);
                                ?>
                                </span>
                                <span class="key">跬步</span>
                            </a>
                        </div>
                    </div>
                </div>
                    </div>
                </div>

           <!-- 任务task-->
            <!-- 任务task-->
            <div class="bor">
                <div class="mytask"><h1>正在攻克的任务</h1></div>
                <div class="panel panel-default" style="">
                    <!-- Default panel contents -->
                    <!--<div class="panel-heading">Panel heading</div>-->
                    <div class="un_task">
                        <?php
                        foreach($tasks as $task)
                        {
                                 if($solve[$task->id]!=2 &&$task->id!=44)continue;
                            if($task->id==44 &&$solve[44]==0)continue;
                        ?>
                            <div class="task_info">
                                <div class="task_title">
                                    <a target="_blank" href="/task/{{Utils::id2url($task->id)}}">{{$task->title}}</a>
                                    <!-- <i class="iconfont">&#xe619;</i> -->
                                </div>
                                <span><?php if($task->id==44)echo "1000分+macbook";else if($task->id==69)echo "poker3机械键盘1枚";else if($task->id==36)echo "poker3机械键盘1枚";else echo ($task->score/100)."分";?></span>
                            </div>             
                                    
                        <?php
                        }
                        ?>
                        
                    </div>
                    
                </div>

            </div>


        </div>
    </div>

</div>
<!-- /.container -->
@endsection
@section('js')
<script>
    window['nodes']=[
<?php
foreach($tasks as $task)
{
if($task->x!=0)
{
   $str='fixed: true,x: '.$task->x.',y: '.$task->y."";
}
else $str="";
if($solve[$task->id]==1)
echo "{id:".$task->id.",name: '".$task->title."', reflexive: false,".$str."},\n";
else if($solve[$task->id]==2)
echo "{id:".$task->id.",name: '".$task->title."', reflexive: true,".$str."},\n";
else 
echo "{id:-1,name: 'none', reflexive: true,fixed: true,x: -100,y: -100},\n";
}
?>

    ];
    window['links']=[
<?php
foreach($links as $link)
{
     if($solve[$link->first]!=1)continue;
     echo "{source: nodes[".($link->first-1)."], target: nodes[".($link->second-1)."], left: false, right: true },\n";
}
?>

    ];

</script>
<script src="/js/d3.js"></script>
<script src="/js/tree1.js"></script>
<script src="/js/local.min.js"></script>
<script src="/js/jquery.mCustomScrollbar.js"></script>
<script src="/js/jquery.mousewheel.min.js"></script>
<script>
     $(function(){
        //right_p is open?
        var flag=false;
        $("body").addClass("html-margin");
        $(".right_p").click(function(e){
            e.stopPropagation();
            var _this=this;
            $(_this).children(".right_menu").fadeOut(200);
            $(_this).removeClass("active").animate({right:"0"},500,function(){
                flag=true;
            });

        });
        $(document).click(function(){
            if(!$(".right_p").hasClass("active")){
                $(".right_menu").parent().animate({right:"-300px"},500,function(){
                    $(".right_menu").fadeIn(200);
                    flag=false;
                    $(this).removeAttr("style");
                });
                $(".right_p").addClass("active");
            }
        });

        $(".un_task").mCustomScrollbar({
            scrollInertia:400
        }).mouseenter(function () {
            document.body.onmousewheel = function () {
                return false;
            }
        }).mouseleave(function () {
            document.body.onmousewheel = function () {
                return;
            }
        });
        //鼠标进入的时候隐藏外面的滚动条,然后对html设置滚动条宽度的margin-right,这样滚动条消失后就不会有明显的宽度变化
        // $(".dd3").mCustomScrollbar({
        //     scrollInertia:400
        // }).mouseenter(function(){
        //     $(".dd3 .mCSB_scrollTools").css("opacity","0.75");
        //     var H=$("html");
        //     var w1 = $(window).width();
        //     H.addClass('lock-test');
        //     var w2 = $(window).width();
        //     H.removeClass('lock-test');
        //     $("#scroll-width").remove();
        //     $("<style type='text/css' id='scroll-width'>.html-margin{margin-right:" + (w2 - w1) + "px;}</style>").appendTo("head");
        //     $("html").toggleClass("alpha");
        //     $(".right_menu").css("margin-right",w2-w1+"px");
        //     if(flag){
        //         $(".task_right").css("margin-right",w2-w1+"px");
        //         console.log(111);
        //     }
        // }).mouseleave(function(){
        //     $("html").toggleClass("alpha");
        //     $("#scroll-width").html('.html-margin{margin-right:0px;}')
        //     $(".right_menu").css("margin-right","0px");
        //     if(!$("html").hasClass("alpha")){
        //         $(".task_right").css("margin-right","0px");
        //     }
        //     $(".dd3 .mCSB_scrollTools").css("opacity","0");
        // });


    });

    //拖动，以后可能用得到
    //  var d=$("#dd");
    //  var divx,divy;
    //  d.mousedown(function(e)
    //  {
    //      var _x= d.position().left;
    //      var _y= d.position().top;
    //      d.css("cursor","pointer");//改变鼠标指针的形状
    //     var ov=e||event;
    //     divx=ov.clientX;
    //     divy=ov.clientY;//当前点击位置
    //     $(document).bind("mousemove",function(e){
    //         var ov=e||event;
    //         d.css("left",_x+ov.clientX-divx+"px");
    //         d.css("top",_y+ov.clientY-divy+"px");//移动鼠标的偏移量
    //     })
    //
    //     $(document).mouseup(function()
    //     {
    //      $(this).unbind("mousemove");
    //         d.css("cursor","default");
    //     })
    //  })
</script>
@endsection
